<template>
    <div class="form-container"
        style="background: var(--color-background); padding: 1rem; border-radius: var(--border-radius-lg); margin-bottom: 1rem;">
        <h3 style="margin: 0 0 1rem 0;">向列中添加机柜</h3>
        <div
            style="margin-bottom: 0.5rem; padding: 0.5rem; background: var(--color-background-soft); border-radius: 4px; font-size: 0.9em; color: var(--color-text-light);">
            <span v-if="previewName">
                机柜名称将自动生成为: {{ previewName }}
            </span>
        </div>
        <div style="margin-bottom: 0.5rem;">
            <label style="display: block; margin-bottom: 0.25rem;">描述:</label>
            <input v-model="form.description" type="text" placeholder="可选：机柜描述" />
        </div>
        <div style="margin-bottom: 0.5rem;">
            <label style="display: block; margin-bottom: 0.25rem;">宽度(mm):</label>
            <input v-model.number="form.width" type="number" min="500" max="1000" />
        </div>
        <div style="margin-bottom: 0.5rem;">
            <label style="display: block; margin-bottom: 0.25rem;">颜色:</label>
            <input v-model="form.color" type="color" />
        </div>
        <div style="margin-bottom: 0.5rem;">
            <label style="display: block; margin-bottom: 0.25rem;">机柜类型:</label>
            <select v-model="form.type" style="width: 100%; padding: 0.5rem;">
                <option v-for="(config, type) in CabinetTypeConfig" :key="type" :value="type">
                    {{ config.icon }} {{ config.name }}
                </option>
            </select>
        </div>
        <div style="display: flex; gap: 0.5rem;">
            <button @click="handleSubmit"
                style="flex: 1; padding: 0.5rem; background: var(--color-success); color: white; border: none; border-radius: var(--border-radius); cursor: pointer;">
                确认
            </button>
            <button @click="$emit('cancel')"
                style="flex: 1; padding: 0.5rem; background: var(--color-text-light); color: white; border: none; border-radius: var(--border-radius); cursor: pointer;">
                取消
            </button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { CabinetType, CabinetTypeConfig } from '@/stores/datacenter'
import { useDataCenterStore } from '@/stores/datacenter'

interface Props {
    rowId: string
}

const props = defineProps<Props>()
const dataCenterStore = useDataCenterStore()

const form = ref({
    description: '',
    width: 600,
    color: '#666666',
    type: CabinetType.SERVER
})

const previewName = computed(() => {
    const row = dataCenterStore.findRowById(props.rowId)
    if (!row) return ''

    const existingCabinets = row.cabinets
    const maxNumber = existingCabinets
        .map(cabinet => {
            const match = cabinet.name.match(new RegExp(`^${row.name}(\\d+)$`))
            return match ? parseInt(match[1]) : 0
        })
        .reduce((max, num) => Math.max(max, num), 0)

    return `${row.name}${maxNumber + 1}`
})

const emit = defineEmits<{
    'submit': [data: typeof form.value]
    'cancel': []
}>()

const handleSubmit = () => {
    emit('submit', { ...form.value })
    // 重置表单
    form.value = {
        description: '',
        width: 600,
        color: '#666666',
        type: CabinetType.SERVER
    }
}
</script>